import { Directive, SimpleChanges } from '@angular/core';
import { OnChanges, OnInit } from '@angular/core';
import { NgStyle } from '@angular/common';

@Directive({
  selector: '[el-aside]',
  host: { class: 'el-aside' },
  providers: [NgStyle],
})
export class AsideDirective implements OnChanges, OnInit {
  private ngStyle: any;
  width: string = '300px';
  private hostStyles: any;

  constructor(ngStyle: NgStyle) {
    this.ngStyle = ngStyle;
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.colletClasses();
  }


  ngOnInit(): void {
    this.colletClasses();
  }

  colletClasses() {
    this.hostStyles = {
      width: this.width,
    };
    this.ngStyle.ngStyle = this.hostStyles;
    this.ngStyle.ngDoCheck();
  }

}
